.customFileReader{
    .loading{
        position: absolute;
        left:50%;
        top:50%;
    }
    .header{
        height: 39px;
        font-size: 20px;
        background: rgba(255, 255, 255, 1);
        padding-left: 10px;
        padding-right: 30px;
        border-bottom: 1px solid #f8f8f8;
        box-shadow: rgba(0, 21, 41, 0.08) 0px 1px 4px;     
        .fileName{
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width: ~'calc(100% - 160px)';
        }
        .operateIcon{
            display: inline-block;
            width:40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            &:hover{
                cursor: pointer;
               color: #1890FF;
            }
        }
    }
 
    .default-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .default-file {
        padding:30px 10px;
        background: #fff;
        border-radius: 10px;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;        
    }
    .footer{
        border-top: 1px solid #f8f8f8;
        &-title{
            height: 29px;
            padding-left: 10px;
            background: #fff;
            line-height: 29px;
            font-size: 16px;
            border-bottom: 1px solid #f8f8f8;
            &:hover{
                cursor: pointer;
            }
        }
        &-content{
            background: rgba(255, 255, 255, 0.5);
            padding:20px 10px;
            display: flex;
            &-file{
                margin-right: 20px;
                width:100px;
                height: 80px;
                .file-icon{
                    width:100px;
                    height: 60px;
                    background: rgba(255, 255, 255, 1);
                    line-height: 70px;
                    text-align: center;
                    border-radius: 5px;
                }
                .file-name{
                    height:20px;
                    line-height: 20px;
                    text-align: center;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    width: 100px;
                    font-size: 12px;
                }
                &:hover{
                    cursor: pointer;
                }
            }
        }
       
    }
    :global{
        @media (max-width: 767px){
            .ant-modal {
                max-width: 100vw;
                margin: 0px auto;
            }
        }       
        .ant-modal-content{
            border-radius: 0;
            background: transparent;
        }
        .ant-modal-body{
            padding: 0;
        }
        .ant-modal-close-x { 
            width: 40px;
            border-radius: 50%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            &:hover{
                color: #1890FF;
            }
        }
    }
}
.customIframe{
    position: relative;  
    background: rgba(255, 255, 255, 0.5);
    .plus-minus{
        position: absolute;
        bottom: 20px;
        right:10px;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        .plus{
            box-shadow: 0px 15px 10px -15px #ccc ;
            &:hover{
                cursor: pointer;
            }
        }
        .minus{
            box-shadow: 0px 15px 10px -15px #ccc ;
            &:hover{
                cursor: pointer;
            }
        }
    }
    .operate{
        position: absolute;
        top:48%;
        left:0;
        display: flex;
        width: 100%;
        justify-content: space-between;
        // visibility: hidden;
        .left{
            width:40px;
            margin-left: 10px;
            height:40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            background: #f8f8f8;
            &:hover{
                cursor: pointer;
                color: #1890FF;
            }
        }
        .right{
            margin-right: 10px;
            width:40px;
            height:40px;
            display: flex;
            justify-content: center;
            align-items: center;    
            border-radius: 5px;
            background: #f8f8f8;
            &:hover{
                cursor: pointer;
                color: #1890FF;
            }
        }
    }
    &:hover{
        .operate{
            visibility:visible;
        }
    }
}
